<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>主页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<!-- 样式文件 -->
		<link href="css/public.css" rel="stylesheet"/>
		<link href="css/iconfont.css" rel="stylesheet"/>
		<style type="text/css">
			body{
				background-color: rgba(0,0,0,0);	/*透明的背景色*/
			}
		</style>
	</head>
		
	<body>
		
		<!-- 头部 -->
		<header class="mui-bar mui-bar-nav" id="header">
			<h1 class="mui-title">首页</h1>
		</header>
		
		<!-- 底部导航 -->
		<!-- mtab -->
		<nav class="mui-bar mui-bar-tab tabBar-bgcolor">
			<a class="mui-tab-item mui-active" data-id="home">
				<span class="mui-icon iconfont icon-shouye-copy"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="weather">
				<span class="mui-icon iconfont icon-tianqi"></span>
				<span class="mui-tab-label">天气</span>
			</a>
			<a class="mui-tab-item" data-id="news">
				<span class="mui-icon iconfont icon-jiqiren"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" data-id="about">
				<span class="mui-icon iconfont icon-guanyu"></span>
				<span class="mui-tab-label">关于</span>
			</a>
		</nav>
		
		<!--这里面是content页面-->
		<div class="mui-content"></div>
		
		<script src="js/mui.js"></script>
		<!-- 这个文件，目前理解是计算出手机状态栏的高度大小，变量 immersed -->
		<script src="js/immersed.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				/*状态栏背景色*/
				statusBarBackground: '#009be0'
			})
			
			mui.plusReady(function () {
			    // 显示系统等待对话框
				plus.nativeUI.showWaiting('加载中...')
				
				// 设置头部的高度
				document.querySelector('#header').style.height = (immersed+44)+'px'
				
				// 手动关闭启动界面
				plus.navigator.closeSplashscreen();
				
				// 设置底部导航所加载的二级页面
				let subInfos = [
					{
						url: 'pages/home.html',	// 首页
						id: 'home'
					},
					{
						url: 'pages/weather.html',	// 天气
						id: 'weather'
					},
					{
						url: 'pages/news.html',	// 消息
						id: 'news'
					},
					{
						url: 'pages/about.html',	// 关于
						id: 'about'
					}
				];
				
				// 对页面数组，通过id获取url，封装一个函数
				let getSubInfoById = function(infoList,id){
					let res = null;
					for(let i=0, len=infoList.length; i<len; i++){
						let _info = infoList[i];
						if(_info.id == id){
							res = _info;
						}
					}
					return res;
				}
				
				// 获取当前窗口 main.html 的窗口
				let mainWv = plus.webview.currentWebview();
				let subStyles = {
					top: (immersed+44)+'px',
					bottom: '51px'
				}
				
				// 默认只加载首页webview子窗口
				let homeWv = plus.webview.create(subInfos[0].url,subInfos[0].id,subStyles)
				// 在main父窗口，去添加home子窗口
				mainWv.append(homeWv)
				
				// 关闭系统等待对话框（加上更加及时，按照流程实现，加载完子窗口，就关闭loading）
				plus.nativeUI.closeWaiting();
				
				let activeTab = subInfos[0].id;	// 当前窗口的id(譬如一打开是首页)
				
				// 给底部导航，添加点击事件
				mui(document).on('tap','.mui-tab-item',function(){
					let _self = this;
					let targetTab = _self.getAttribute('data-id');
					if(targetTab===activeTab){
						return;		// 不操作（后面不会执行）
					}
					
					// 更改标题文字，通过底部导航的span标签获取页面名称
					//console.log(mui('.mui-title')[0].innerText)
					mui('.mui-title')[0].innerText = _self.querySelector('.mui-tab-label').innerText;
					
					// 通过id获取webview中间子窗口
					let _subWv = plus.webview.getWebviewById(targetTab);
					
					if(!_subWv){
						// 没有子窗口（譬如：天气、消息、关于，默认一开始还没用，要创建）
						let _subInfo = getSubInfoById(subInfos,targetTab);
						// 每个子窗口，只创建一次
						_subWv = plus.webview.create(_subInfo.url,_subInfo.id,subStyles);
						mainWv.append(_subWv)
					}
					_subWv.show();
					
					// 当显示另外一个子窗口，那么就得隐藏当前窗口（譬如默认当前子窗口是：home）
					plus.webview.getWebviewById(activeTab).hide('none')
					
					// 最后：更改当前窗口的id名称
					activeTab = targetTab;
					
				})
				
				
			})
			
			// mui.back();  没有用，要重写，重新写的效果：1秒内连续点两次返回键，就退出应用，点第1次做个提示
			var first = null;
			mui.back = function(){
				if(!first){
					// 变量是null，那就记录时间戳（为了判断1秒内）
					first = new Date().getTime();
					plus.nativeUI.toast('再按一次退出应用')
					setTimeout(()=>{
						first = null;
					},1000);
				}else{
					if(new Date().getTime() - first < 800){	// 针对用户的手速
						// 退出应用，仅安卓有效
						plus.runtime.quit();
						// 重启
						//plus.runtime.restart();
					}
				}
			}
		</script>
	</body>

</html>
